<template>
  <div class="box" shadow="never">
    <el-form :model="list" label-width="120px" :rules="rules" ref="ruleForm">
      <el-form-item></el-form-item>
      <el-form-item label-width="100px" label="教师ID：" prop="teacher_id">
        <el-input v-model.number="list.teacher_id" style="width: 400px">
        </el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="课程名称：" prop="name">
        <el-input v-model="list.name" style="width: 400px"> </el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="开课时间：" prop="start_time">
        <el-date-picker
          v-model="list.start_time"
          type="datetime"
          placeholder="选择日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 上传图片 -->
      <el-form-item label="文章图片：" label-width="100px">
        <el-upload
          class="avatar-uploader"
          action="http://42.194.159.131:8080/pic/imgUpload?path=course"
          :headers="headers"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="list.cover_picture"
            :src="list.cover_picture"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <!-- ------------------------------ -->

      <el-form-item label-width="100px" label="课程类型：" prop="type">
        <!-- <el-input v-model="list.type" style="width: 400px" /> -->
        <el-select v-model="list.type" placeholder="请选择文章类型">
          <el-option label="运动养生" value="运动养生"></el-option>
          <el-option label="膳食均衡" value="膳食均衡"></el-option>
          <el-option label="心理健康" value="心理健康"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
        <el-button
          type="success"
          @click="addType"
          icon="el-icon-plus"
        ></el-button>
      </el-form-item>

      <el-form-item label-width="100px" label="课程标签：" >
        <!-- <el-input v-model="list.label" style="width: 400px" /> -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="太极">太极</el-checkbox>
          <el-checkbox label="健康">健康</el-checkbox>
          <el-checkbox label="运动">运动</el-checkbox>
          <el-checkbox label="养生">养生</el-checkbox>
          <el-checkbox label="手凉">手凉</el-checkbox>
          <el-checkbox label="脚凉">脚凉</el-checkbox>
          <el-checkbox label="膝部">膝部</el-checkbox>
          <el-checkbox label="八段锦">八段锦</el-checkbox>
          <el-checkbox label="养生操">养生操</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label-width="100px" label="课程价格：" prop="price">
        <el-input v-model.number="list.price" style="width: 400px" />
      </el-form-item>

      <el-form-item
        label-width="100px"
        label="公司简介："
        prop="brief_introduction"
      >
        <el-input v-model="list.brief_introduction" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="课程介绍：" prop="introduction">
        <el-input v-model="list.introduction" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="学习人数：" prop="study_number">
        <el-input v-model.number="list.study_number" style="width: 400px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <!-- <el-button @click="onCancel">取消</el-button> -->
      </el-form-item>
    </el-form>

     <el-dialog :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="list" >
        <el-form-item label="课程类型" label-width="100px">
          <el-input autocomplete="off" v-model="list.type"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">添 加</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import addhealcourse from "@/api/healthycourse";
export default {
  data() {
    //观看人数判断
    var num = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("内容不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      dialogFormVisible: false, //对话框（查看）
      // ------------------------------------------日历
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      checkList: [],
      //----------------------------------------------
      list: {
        type:"",
        cover_picture: "",
        label:"太极 健康",
        coursePartList: [
          {
            course_id: 0,
            part_number: 1,
            part_name: "string",
            brief: "string",
            content: "string",
            status: 0,
          },
        ],
      },
      headers: {
        Authorization: getToken(),
      },
      rules: {
        name: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请输入课程类型", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        label: [
          { required: true, message: "请输入课程标签", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        brief_introduction: [
          { required: true, message: "请输入公司简介", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度在 2 到 100 个字符",
            trigger: "blur",
          },
        ],
        introduction: [
          { required: true, message: "请输入课程介绍", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度在 2 到 100 个字符",
            trigger: "blur",
          },
        ],
        start_time: [
          {
            type: "date",
            required: true,
            message: "请选择开课日期、时间",
            trigger: "blur",
          },
        ],
        study_number: [{ validator: num, trigger: "blur", required: true }],
        price: [{ validator: num, trigger: "blur", required: true }],
        teacher_id: [{ validator: num, trigger: "blur", required: true }],
      },
    };
  },

  methods: {
    onSubmit() {
      //获取from结点，验证字段
      this.$refs.ruleForm.validate(async (success) => {
        //如果全部字段符合条件
        if (success) {
          var vm = this;
          addhealcourse
            .adcourse(vm.list)
            .then(function (resp) {
              vm.$message({
                message: "添加成功!",
                type: "success",
              });
              vm.$router.go(-1);
            })
            .catch(function (error) {
              vm.$message.error("添加失败");
            });
        } else {
          return false;
        }
      });
    },
     addType(){
    console.log('aaaaaaa');
    this.dialogFormVisible = true;
  },
    //上传图片相关回调
    handleAvatarSuccess(res, file) {
      this.list.cover_picture = res.data.picUrl;
      console.log("上传图片成功", res);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log("beforeAvatarUpload", file);
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  // -------------------------------------------------

};
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}

.box {
  margin-left: 200px;
  height: 1100px;
  width: 700px;
  border: solid rgb(187, 186, 187);
}

.avatar-uploader .el-upload {
  border: 3px dashed #decfcf;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

